<div class="r_crumbs">
  <a href="javascript:;">首页</a>
  <a href="javascript:;">机器人管理</a>
  路径管理
</div>
<div class="r_main">
  <app-alert></app-alert>
  <div class="r_box">
    <div class="r_boxHead">
      <h2>路径</h2>
    </div>
    <div class="r_boxContent">
      <div class="r_boxTool clearfix">
        <div class="r_boxToolFl">
          <div class="row">
            <div class="col-md-4 col-sm-5 ">
              <div class="r_boxToolPad">
                <div class="input-group">
                  <div class="form-control pull-right" style="border: none;background: #f0f7fd;"></div>
                  <!--<span class="input-group-addon" ><i class="fa fa-search"></i></span>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="r_boxToolFRl">
          <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary"
                  (click)="onAddPath()"><i class="fa fa-plus"></i> 新增
          </button>
        </div>
      </div>
      <div>
        <div class="r_boxPad">
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <thead>
              <tr>
                <th>编号</th>
                <th>路径名称</th>
                <th>路径状态</th>
                <th>地图标识</th>
                <th width="120">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let item of pathInfo">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                  <app-cust-select dataType="pathStatus" viewType="readonly" [value]="item.status"></app-cust-select>
                </td>
                <td>{{item.mapId}}</td>
                <td style="text-align: center;">
                  <div class="tabledit-toolbar btn-toolbar" style=" display: inline-block;">
                    <div class="btn-group btn-group-sm">
                      <button class="tabledit-edit-button btn btn-sm btn-default" type="button"
                              (click)="onEditPath(item)">编辑
                      </button>
                      <button class="tabledit-delete-button btn btn-sm btn-default" type="button"
                              (click)="onDeletePath(item)">删除
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <app-pagination [currentPage]="curPage" [totalPages]="pathInfoPage?.totalPages"
                        (clickPage)="onPage($event)"></app-pagination>
      </div>
    </div>
  </div>
</div>
<!-- 新增/编辑 -->
<div id="data_editor" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"
                                                                                          (click)="searchPath()">&times;</span>
        </button>
        <h4 class="modal-title">{{editorTitle}}</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">路径名称:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="inputEmail3" placeholder="路径名称" [(ngModel)]="curpathInfo.name">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword4" class="col-sm-3 control-label">路径状态:</label>
          <div class="col-sm-9">
            <select class="form-control" id="inputPassword4" [(ngModel)]="curpathInfo.status">
              <option value="0">有效</option>
              <option value="1">失效</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-3 control-label">地图标识:</label>
          <div class="col-sm-9">
            <select class="form-control" id="inputPassword3" [(ngModel)]="curpathInfo.mapId">
              <option *ngFor="let obj of mapPathInfo" value="{{obj.mapId}}">{{obj.name}}</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">文件上传:</label>
          <div class="col-sm-9">
            <input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)"
                   id="inputPassword6" accept="image/png,image/jpeg,image/jpg"/>
          </div>
        </div>
        <div style="width: 200px;height: 200px;margin: 0 auto;border: 1px solid red">
          <img src="{{imgUrl}}" alt="" style="width: 200px;height: 200px;margin: 0 auto;">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="save()">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="searchPath()">取消</button>
      </div>
    </div>
  </div>
</div>
<!-- 删除 -->
<div id="delete_confirm" class="modal fade  bs-example-modal-lg" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">是否确定删除该信息?</h4>
      </div>

      <div class="modal-body">
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th>编号</th>
              <th>路径名称</th>
              <th>路径状态</th>
              <th>地图标识</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>{{curpathInfo.id}}</td>
              <td>{{curpathInfo.name}}</td>
              <td>{{curpathInfo.status}}</td>
              <td>{{curpathInfo.mapId}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer" style="text-align: right;">
        <button type="button" class="btn btn-primary" (click)="delete()">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>
